﻿stage = new Kinetic.Stage({
        container: "container",
        width: 6400,
        height: 6400
    });

    layer = new Kinetic.Layer();
    stage.add(layer);
    var canvas1 = document.getElementById('support');
    canvas1.width = 1666
    canvas1.height = 1000;
    var map = document.getElementById('minimap');
    var quadmap = document.getElementById('miniquad');
    map.width = 300
    map.height = 300
    quadmap.width = 300;
    quadmap.height = 300;
    flowerImage = new Image();
    zambiImage = new Image()
    zambiImage.src = "zambi.png"
    flowerImage.src = '1b.png';
    startingConditions = 0;
    clusters = [];
    lines = [];
    calledSolo = 1;
    window.onresize= function() {
        var map = document.getElementById('minimap');
        map.width = 300*window.innerWidth / 1366;
        map.height = 300 * window.innerHeight / 766;
        var mapq = document.getElementById('miniquad');
        mapq.width = 300*window.innerWidth / 1366;
        mapq.height = 300 * window.innerHeight / 766;
        var bdy = document.getElementsByTagName('body');
        bdy.background = '../fon1.bmp';
    }

    function drawStartingConditions(parameter) {
        startingConditions = 1;
        var flowers = [];
        var textFlowers=[];
           var map = document.getElementById("minimap");
            var mapCtx = map.getContext("2d");
           mapCtx.fillStyle = "#FF0000";
  
        for (var i = 0; i < parameter.Iterations[0].Points.length; i++) {
            flowers[i] = new Kinetic.Rect({
                x: parameter.Iterations[0].Points[i].X,
                y: parameter.Iterations[0].Points[i].Y + 88,
                width: 15,
                height: 15,
                fillPatternImage: flowerImage
            });
            var txt = "[" + ((parameter.Iterations[0].Points[i].X)/32-100) + "," + ((parameter.Iterations[0].Points[i].Y)/32-100) + "]";
            textFlowers[i] = new Kinetic.Text({
                text:txt,
                x: parameter.Iterations[0].Points[i].X,
                y: parameter.Iterations[0].Points[i].Y+80,
                fontSize:10,
                fill:"FFFFFF"
                                 
            }); 
            flowers[i].setFillPatternScale([15 / flowerImage.width, 15 / flowerImage.height]);
            layer.add(flowers[i]);
            layer.draw();
            layer.add(textFlowers[i]);
            layer.draw();
            
            mapCtx.fillRect(parameter.Iterations[0].Points[i].X/32*map.width/201,parameter.Iterations[0].Points[i].Y/32*map.height/201, 6, 6);
            flowers[i].transitionTo({
                duration: 2,
                easing: 'elastic-ease-out',
                x: parameter.Iterations[0].Points[i].X,
                y: parameter.Iterations[0].Points[i].Y+88,
                fillPatternScale: { x: 32 / flowerImage.width, y: 32 / flowerImage.height },
                width: 32,
                height: 32
            });
            layer.draw();

        }
//        var ctx = document.getElementById('canvas').getContext('2d');
//        var j = 30;
//        var interval = setInterval(function () {
//            ctx.clearRect(0, 0, 6400, 6400);
//            for (var i = 0; i < parameter.Iterations[0].Points.length; i++) {
//                ctx.drawImage(flowerImage, parameter.Iterations[0].Points[i].X, parameter.Iterations[0].Points[i].Y, j, j);
//            }
//            j++;
//            if (j == 71) {
//                clearInterval(interval);
//                flowerInterval = setInterval(function () {
//                    for (var i = 0; i < parameter.Iterations[0].Points.length; i++) {
//                     ctx.drawImage(flowerImage, parameter.Iterations[0].Points[i].X, parameter.Iterations[0].Points[i].Y, 72, 72);
//                    }
//                }, 33)
//            }
//        }, 33);
    }
    function ShowIterationNumber(number) {
        var ctx = document.getElementById('support').getContext('2d');
        ctx.font = '200px sans-serif';
        ctx.fillStyle = "rgba(255,255,255,0.6)";
        var step = 0;
        var interval = setInterval(function () {
            ctx.clearRect(0, 0, 6400, 6400);
            if (number >= 2) {
                var text = "Iteration" + number;

            } else {
                text = "Iteration" + number;
            }
            ctx.fillText(text, 200*window.innerWidth/1366, step * 2);
            step++;
            if (step == 100) { clearInterval(interval);setTimeout(function(){ ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);},500) }
        }, 33);
        if (number >= 2) {
            //console.log(window.mainParameter.Iterations[window.mainParameter.Iterations.length - number + 1].Result);
        }
    }
    function main(parameter) {
        ShowIterationNumber(0);
        calledSolo = 0;
        clusters = [];
        lines = [];
        zombitext = [];
        colors = [];
        for (var c = 0; c < parameter.Iterations[1].ClustersX.length; c++) {
            colors[c] = rndColor()[c];
        }
        var i = 0;
        setTimeout(function () {
            if (startingConditions == 0) {
                drawStartingConditions(parameter);
            }
        }, 2000);
        var interval = setInterval(function () {
            i++;
            if (i + 1 >= parameter.Iterations.length) {
                clearInterval(interval);
                calledSolo = 1;
            }
            ShowIteration(parameter, i);
        }, 7500);
    }


    function ShowIteration(parameter, number) {
        this.ShowIterationNumber(number);
        var i = number;
        setTimeout(function () {
            if (startingConditions == 0) {
                drawStartingConditions(parameter);
            }
        }, 2000);
        setTimeout(function () {
            var map = document.getElementById("minimap");
            var mapCtx = map.getContext("2d");
            var temp = 0;
            for (var k = 0; k < parameter.Iterations[i].ClustersX.length; k++) {
                if (clusters[k] == undefined) {
                    clusters[k] = new Kinetic.Rect({
                        x: parameter.Iterations[i].ClustersX[k],
                        y: parameter.Iterations[i].ClustersY[k],
                        width: 60,
                        height: 120,
                        fillPatternImage: zambiImage,
                        opacity: 0.1
                    });
                    zombitext[k] = new Kinetic.Text({
                        text: "["+(parameter.Iterations[i].ClustersX[k]/32-100)+","+(parameter.Iterations[i].ClustersY[k]/32-100)+"]",
                        x: parameter.Iterations[i].ClustersX[k],
                        y: parameter.Iterations[i].ClustersY[k] - 8,
                        fontSize: 10,
                        fill: "0000FF"
                    });
                    clusters[k].setFillPatternScale([60 / zambiImage.width, 120 / zambiImage.height]);
                    layer.add(clusters[k]);
                    layer.add(zombitext[k]);
                    layer.draw();

                    clusters[k].transitionTo({
                        duration: 2,
                        opacity: 1,
                        easing: 'linear'
                    });
                }
                else {
                    if (temp == 0) {
                        temp = 1;

                        mapCtx.clearRect(0, 0, map.width, map.height);

                        for (var c = 0; c < parameter.Iterations[i].Points.length; c++) {
                            if (i >= 2) {
                                mapCtx.fillStyle = "rgb(255,0,0)";
                            } else {
                                mapCtx.fillStyle = "rgb(255,0,0)";
                            }
                            mapCtx.fillRect((parameter.Iterations[i].Points[c].X / 32) * map.width / 201, parameter.Iterations[i].Points[c].Y / 32 * map.height / 201, 6, 6);
                        }
                    }
                    zombitext[k].transitionTo({
                        duration: 2,
                        easing: 'linear',
                        x: parameter.Iterations[i].ClustersX[k],
                        y: parameter.Iterations[i].ClustersY[k]-8, 
                    });
                    zombitext[k].setText("[" + (parameter.Iterations[i].ClustersX[k] / 32 - 100) + "," + (parameter.Iterations[i].ClustersY[k] / 32 - 100) + "]");

                clusters[k].transitionTo({
                    duration: 2,
                    easing: 'linear',
                    x: parameter.Iterations[i].ClustersX[k],
                    y: parameter.Iterations[i].ClustersY[k],
                    fillPatternScale: { x: 60 / zambiImage.width, y: 120 / zambiImage.height },
                    width: 60,
                    height: 120
                });
            }
            mapCtx.fillStyle = "#0000FF";
            mapCtx.fillRect(parameter.Iterations[i].ClustersX[k] / 32 * map.width / 201, parameter.Iterations[i].ClustersY[k] / 32 * map.height / 201, 6, 6);
        }
        setTimeout(function () {
            if (i >= 2) {
                for (var k = 0; k < lines.length; k++) {
                    lines[k].remove();
                }
                layer.draw();

                lines = [];
                for (var k = 0; k < parameter.Iterations[i].Points.length; k++) {
                    lines[k] = new Kinetic.Line({
                        points: [parameter.Iterations[i].Points[k].X + 20, parameter.Iterations[i].Points[k].Y + 104, parameter.Iterations[i].ClustersX[parameter.Iterations[i].Points[k].Cluster] + 15, parameter.Iterations[i].ClustersY[parameter.Iterations[i].Points[k].Cluster] + 15],
                        stroke: 'white',
                        strokeWidth: 1,
                        lineCap: 'round',
                        lineJoin: 'round',
                        dashArray: [33, 10]
                    });
                    layer.add(lines[k]);
                    if (clusters[k] != undefined) {
                        clusters[k].transitionTo({
                            duration: 1,
                            easing: "elastic-ease-out",
                            fillPatternScale: { x: 70 / zambiImage.width, y: 140 / zambiImage.height },
                            width: 70,
                            height: 140
                        });
                    }
                    layer.draw();
                }
            }
        }, 2500);
    }, 2500);
    }

    function clearShit() {
        while(layer.children.length!=0) {
            layer.children[0].remove();
            layer.draw();
        }
        clusters=[];
        lines=[];
        zombitext = [];
        startingConditions = 0;
    }

   window.onload = function(event) {
               var map = document.getElementById('minimap');
        map.width = 300*window.innerWidth / 1366;
        map.height = 300 * window.innerHeight / 766;
              var mapq = document.getElementById('miniquad');
        mapq.width = 300*window.innerWidth / 1366;
        mapq.height = 300 * window.innerHeight / 766;
        var html = document.documentElement;
        var body = document.body;
        var mapCtx = mapq.getContext("2d");

       setInterval(function() {
           var scrollTop = html.scrollTop || body && body.scrollTop || 0;
           var scrollLeft = html.scrollLeft || body && body.scrollLeft || 0;
           mapCtx.clearRect(0, 0, mapq.width, mapq.height);
           mapCtx.fillStyle = "rgba(255,255,0,0.3)";
           mapCtx.fillRect(mapq.width*scrollLeft/6600,mapq.height*scrollTop/6600, mapq.width*document.documentElement.clientWidth/6600, mapq.height*document.documentElement.clientHeight/6600);
           
       }, 50);

       // alert(event.pageXOffset);
   }

   function rndColor() {
        var hex = ['CC3300','CC00FF','CCFF00','FF0000','330033'];
        return hex;
    }